<template>
  <div class="body-box">
    <div class="body-content">
      <!--头-->
      <header class="header-box">
        <img class="header-img-backimgtwo" src="../assets/showdow-img@2x.png" alt="">
        <img class="header-img-backimgone" src="../assets/title-img@2x.png" alt="">
        <p>顺德农商银行应用日志监控</p>
      </header>
      <!--应用系统告警-->
      <div class="sys">
        <div class="sys-center">
          <div class="title">
            <h3>应用系统日志告警</h3>
            <h3>{{ date.now_day }}{{ "&nbsp;" + date.week + "&nbsp;" }}{{"&nbsp;"+date.now_time }}</h3>
          </div>
          <system-page v-if="appList.length" :appList="appList"></system-page>
        </div>
        <!--告警详情日志-->
        <div class="sys-bottom">
        <system-log :logList="logList" :titleList="titleList" :widthList="widthList"></system-log>
        <system-pie :pieList="pieList"></system-pie>
        </div>
      </div>
    </div>
    <!--背景图-->
    <div class="bg"></div>
  </div>
</template>

<script>
import {ref} from "vue";
import {formatDate} from "@/utils/date";
import http from '../api/api-index'
import SystemPage from "@/views/SystemPage";
import SystemLog from "@/views/SystemLog";
import SystemPie from "@/components/system-pie";

export default {
  name: 'HomeView',
  components:{
    SystemPie,
    SystemPage,
    SystemLog
  },
  data(){
    return{
      titleList:[],
      appList:[],
      logList:[],
      pieList:[],
      widthList:[],
      date: [],
      time_num:null
    }
  },
  async created(){
    let _this = this
    await http.getIndexTime().then((res)=>{
      this.time = res.time
      let timer = setInterval(()=>{
        _this.allHttp()
      },this.time)
    })
    this.allHttp()

    this.timeStart();
  },
  methods:{
    //时间
    timeStart() {
      this.timer = setInterval(() => {
         this.date = formatDate()
      }, 1000);
    },
    allHttp(){
      // 请求系统数据
      http.getQueryCsvList('sd_full_sys_app.csv').then((res)=>{
        if(res.code == 200){
          this.appList = []
          this.appList = res.list
        }
      })
      // 请求日志
      http.getQueryCsvList('sd_full_sys_msg.csv').then((res)=>{
        if(res.code == 200){
          this.titleFun(res)
        }
      })
      // 请求饼图数据
      http.getQueryCsvList('sd_full_sys_pie.csv').then((res)=>{
        if(res.code == 200){
          this.pieList = []
          this.pieList = res.list
        }else {
          res.json(data)
        }
      })
    },
    // 日志标题排序
    titleFun(logList){
      this.logList = []
      this.logList = logList.list
      console.log('当前版本1.0.5')
      http.getQueryCsvList('sd_full_sys_msg_title.csv').then((res)=>{
          this.titleList = []
          let datatitle = res.list[0].name.split(',')
          if(this.logList.length > 0){
            let  screenWidth = document.body.clientWidth;
            let currentFontSize = screenWidth * 100 / 1920;
            let widthNumZong = screenWidth - currentFontSize*4 //屏幕总共多少宽度
            console.log('左边总宽度',widthNumZong)

            let shijiNumzong = 0 //实际字数占用宽度
            let sysNameWidth = 0 //系统名称宽度
            // let timeWidth = currentFontSize*0.16*12 //告警时间宽度
            // let levWidth = currentFontSize*0.16*4 //告警级别宽度
            let timeWidth = 160 //告警时间宽度
            let levWidth = 60 //告警级别宽度
            for(let i = 0;i<datatitle.length;i++){
              let widthNum = 0
              if(datatitle[i] == '告警时间'){
                widthNum = timeWidth
              }else if(datatitle[i] == '告警级别'){
                widthNum = levWidth
              }else if(datatitle[i] == '系统名称'){
                widthNum = timeWidth
              }else{
                let realNum = this.logList[0][datatitle[i]].length * currentFontSize*0.16
                let overWidth = widthNumZong-(0.36*currentFontSize) - (timeWidth*2+levWidth+datatitle.length*0.12*currentFontSize)  //剩余宽度
                let overWidthItem = overWidth/(datatitle.length-3)
                if(realNum < overWidthItem){
                  if(realNum < currentFontSize*0.16*4){
                    widthNum = currentFontSize*0.16*4
                  }else{
                    widthNum = realNum
                  }
                }else{
                  widthNum = overWidthItem
                }
              }
              this.titleList.push({
                name:datatitle[i],
                width:widthNum+'px'
              })
            }
          }else{
              for(let i = 0;i<datatitle.length;i++){
                this.titleList.push({
                  name:datatitle[i],
                  width:'20%'
                })
              }

          }

          console.log(this.titleList)
      })
    },
    isChinese(str) {
      var filter = /[\u4E00-\u9FA5\uF900-\uFA2D]{1,}/;//匹配中文
      if (filter.test(str)) {
        return true
      } else {
        return false
      }
    },
    isNumber(txt){
      var retNum = /^\d*$/;//匹配数字
      if(retNum.test(txt)){
        return true
      }else{
        return false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .body-box{
    width: 100vw;
    height: 100vh;
    background: url('../assets/bg@2x.png')no-repeat;
    background-size: 100% 100%;
    color: #fff;
    position: relative;
    .body-content{
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      .header-box{
        width: 100%;
        height: 1.2rem;
        position: relative;
        .header-img-backimgone{
          width: 100%;
          height: 1.2rem;
          position: absolute;
          z-index: 1;
          left: 0;
          top: 0;
        }
        .header-img-backimgtwo{
          width: 100%;
          height: 3.60rem;
          position: absolute;
          z-index: 1;
          left: 0;
          top: 0;
        }
        p{
          width: 100%;
          height: 1.2rem;
          font-family: MicrosoftYaHeiSemibold;
          font-size: 0.32rem;
          letter-spacing: 0.02rem;
          font-weight: 600;
          text-align: center;
          line-height: 0.8rem;
          position: absolute;
          z-index: 2;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
        }
      }
      .sys{
        .sys-center{
          box-sizing: border-box;
          padding: 0 0.3rem 0 0.5rem;
          width: 100%;
          .title{
            margin-top: -0.3rem;
            display: flex;
            font-family: MicrosoftYaHei;
            font-size: 0.24rem;
            font-weight: 400;
            justify-content: space-between;
            width: 100%;
            box-sizing: border-box;
          }
        }
        .sys-bottom{
          width: 100%;
          box-sizing: border-box;
          padding: 0 0.5rem 0.5rem 0.5rem;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        }
      }
    }

    .bg{
      width: 100%;
      height: 100%;
      background: url("../assets/right-sys-img.png") no-repeat right,url("../assets/left-sys-img.png")no-repeat left, url("../assets/bottom-img.png") no-repeat right 0 bottom 0px;
      background-size: contain;
      left: 0;
      top: 0;
      position: absolute;
      z-index: 1;
    }
  }


</style>
